<!--行为-->
<script>
//1.引入三个组件
import hmHeader from "@/components/hm-header.vue";
import hmMain from "@/components/hm-main.vue";
import hmFooter from "@/components/hm-footer.vue";

export default {
  name: "App",
  //2.在components节点下注册组件
  components: {
    hmHeader,
    hmMain,
    hmFooter
  }
}
</script>

<!--结构-->
<template>
  <div id="app">
    <!--3.以标签的形式使用组件-->
    <hm-header></hm-header>
    <hm-main></hm-main>
    <hm-footer></hm-footer>
  </div>
</template>

<!--样式-->
<style lang="less">
#app {
  width: 800px;
  height: 600px;
  background-color: #b00000;
  margin: 200px auto;
}

body {
  background-color: #cccccc;
}
</style>
